<template>
  <a-modal 
    v-model:visible="visible" 
    :title="isAdd ? '添加示范区' : '编辑示范区'" 
    class="custom_dialog"
    @ok="onConfirm"
    @cancel="onCancel">
    <a-form
      ref="refForm"
      label-align="right"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="form"
      :rules="rules">
      <a-form-item label="示范区名称" name="demonstrationName">
        <a-input v-model:value="form.demonstrationName" autocomplete="off" />
      </a-form-item>
      <a-form-item label="示范区编号" name="commonId">
        <a-input v-model:value.number="form.commonId" type="number" />
      </a-form-item>
      <a-form-item label="视点设置" name="viewpoint">
        <a-button type="primary" style="width:100%;" @click="setViewpoint"> 获取视点 </a-button>
        <a-textarea v-model:value="form.viewpoint" :autoSize="{ minRows: 3 }" readonly style="marginTop:10px"/>
      </a-form-item>
    </a-form>
    <Map @confirm="getViewpoint" ref="refMap" />
  </a-modal>
</template>
<script setup>
import { ref, defineExpose, defineEmits } from "vue";
import { createArea, editArea } from "../../../api/area/handleData";
import Map from './Map.vue';
import { message } from 'ant-design-vue';
const refForm = ref();
const visible = ref(false);
const refMap = ref();
const isAdd = ref(true);
const emit = defineEmits(['confirm']);
const labelCol = ref({style:{width:'110px'}});
const wrapperCol = ref({style:{marginLeft:'42px'},span:16});
const form = ref({
  id: undefined,
  commonId: undefined,
  demonstrationName: undefined,
  viewpoint: undefined,
});

const rules = ref({
  demonstrationName: [{ required: true, message: "请输入示范区名称", trigger: "blur" }],
  commonId: [{ required: true, message: "请输入示范区名称", trigger: "blur", type: "number" }],
  // viewpoint: [{ required: true, message: "请设置示范区视点", trigger: "blur"}]
})

const onCancel = () => {
  visible.value = false
}

const onConfirm = () => {
  refForm.value.validate().then(()=>{
    if (isAdd.value) {
      addArea();
    } else {
      updateArea();
    }
  })
  .catch(()=>{
    debugger
  })
}

/** 添加示范区 */
const addArea = () => {
  const {id, commonId, demonstrationName, viewpoint} = form.value;
  createArea({id, commonId, demonstrationName, viewpoint}).then(({resCode, resMsg})=>{
    if(resCode === '00000'){
      message.success(resMsg);
      visible.value = false;
      emit('confirm');
    }else{
      message.error(resMsg)
    }
  })
}

/**编辑示范区 */
const updateArea = () => {
  const {id, commonId, demonstrationName, viewpoint} = form.value;
  editArea({id, commonId, demonstrationName, viewpoint}).then(({resCode, resMsg})=>{
    if(resCode === '00000'){
      message.success(resMsg);
      visible.value = false;
      emit('confirm');
    }else{
      message.error(resMsg)
    }
  })
}
/**显示表单 */
const show = (add, formData) =>{
  reset();
  Object.assign(form.value, formData);
  visible.value = true;
  isAdd.value = add;
}
/**重置表单 */
const reset = () =>{
  form.id = undefined;
  form.commonId = undefined;
  form.demonstrationName = undefined;
  form.viewpoint = undefined;
  if(refForm.value)refForm.value.resetFields();
}
/** 设置示范区视点 */
const setViewpoint = () =>{
  const {id, viewpoint} = form.value;
  refMap.value.show(id, viewpoint);
}

/** 获取到设置的视点 */
const getViewpoint = (viewpointStr)=>{
  form.value.viewpoint = viewpointStr;
}

defineExpose({
  show
})
</script>
<style lang="less" scoped>
.modal_button {
  width: 100%;
  height: 34px;
  background: #2071f5;
  opacity: 1;
  border-radius: 0px;
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  color: #ffffff;
  opacity: 1;
}

.modal_text {
  top: 16px;
}
</style>
